{% extends "login.html" %} 
{% block title %}CourseHub{% endblock %} 
{%block navigation %}{% endblock %}

{% block content %}
<div class="latest">
	<div class="latest-in">
		
<a id = "latestcomment" href = "/comment/" >Latest Comment </a> &nbsp;|&nbsp;<a id = "popularcomment" href="/course/">Most Popular Course </a>
		
	</div>
</div>

	<!-- Content box with light blue background -->
	{% if CommentList %} {% for Comment in CommentList %}

		<div class="course">
				<div class="date">
					
					<div class="day">
					<div class = "ratestar">{{  Comment.comment_rating }}</div>						
					
					</div>

				</div>
				<h3>
					{{  Comment.comment_title }}
				</h3>
				<div id="university">
					<p><a href="/course/{{  Comment.course.id }}/">{{  Comment.course.course_title }}</a>&nbsp;|&nbsp;{{  Comment.course.school.university }}</p>
				</div>
				<div class="tutor">{{  Comment.comment_date }}</div>
				<div class="cleaner">&nbsp;</div>

			</div>

	{% endfor %} {% else %}
		<p>No course created</p>
	{% endif %}
	<!-- Content box with light blue background end -->
	
	
	
<script type="text/javascript">
	
  jQuery(function() {
	  
		$(function() { 
			$('div.ratestar').ratecourse();
		});
  
       var latest = jQuery("#latestcomment");
 
           jQuery("#latestcomment").css("background-color", "#214F73")
           jQuery("#latestcomment").css("color", "#ffffff")
           jQuery("#popularcomment").css("background-color", "#EBFFC0")
           jQuery("#popularcomment").css("color", "#214F73")

      
      var popular = jQuery("#popularcomment");
      
      popular.click(function(e) {
           jQuery("#popularcomment").css("background-color", "#214F73")
           jQuery("#popularcomment").css("color", "#ffffff")
           jQuery("#latestcomment").css("background-color", "#EBFFC0")
           jQuery("#latestcomment").css("color", "#214F73")
      });
           
  });
  
  $.fn.ratecourse = function (){
		return $(this).each(function() { 
	        // Get the value 
	        var rate = parseFloat($(this).html()); 
	        // Make sure that the value is in 0 - 5 range, multiply to get width 
	        var width = (rate/5) * 55; 
	        $(this).html('<div class="rating_bar"><div style="width:' + width + 'px"></div></div>');
	      
	    }); 
		
	}
 </script> 
{% endblock %}
